<template>
    <!-- 商铺 -->
    <div class="top">
        <div class="dianpu">
            <div class="dianpu-top">
                <img src="./imgs/1.png" alt="">
                <div class="dianpu-top-right">
                    <div class="dianpu-name">
                        <b><span>书亦烧仙草(沙园店){{">"}}</span></b>
                        <button>收藏</button>
                    </div>
                    <div class="dianpu-jiesao">
                        <div class="dianpu-paihang">1111</div>
                        <div class="dianpu-a"></div>
                        <div class="dianpu-shijian">2222</div>
                    </div>
                </div>
                <div class="dianpu-gg">公告：但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是但是</div>
            </div>
            <!-- 优惠卷 头1-->
            <var-button type="warning" block @click="show = true" color="#fafafa" text-color="red" text ripple="false">基本使用</var-button>
        </div>
    </div>
    <!-- 优惠卷 尾1-->
    <var-action-sheet 
                :actions="actions"
                v-model:show="show"
                @select="handleSelect"
            />
    <!-- 中间推荐评价搜索 -->
    <div class="center">
        <!-- 点菜评价 -->
       <div class="center-top">
            <div class="center-top-A">
                <!-- <template v-for="(item,index) in a" :key="item">
                    <router-link to="/dianpu/diancai/index.vue">{{item}}</router-link>
                </template> -->
            <!-- 选项卡 -->
                <var-tabs
                    color="#fff"
                    active-color="#fff"
                    inactive-color="hsla(0, 0%, 100%, .6)"
                    v-model:active="active"
                    indicator-color="#f4ba67"
                    indicator-size="2px 2px"
                >
                    <var-tab style="color:black">点菜</var-tab>
                    <var-tab style="color:black">套餐</var-tab>
                    <var-tab style="color:black">评价</var-tab>
                </var-tabs>
            </div>
            <div class="center-top-B">
                <button class="center-top-Btn1">好友拼单</button>
                <button class="center-top-Btn2">搜索</button>
            </div>
       </div>
    </div>
    <!-- 详情 -->
    <div class="neirong">
        <!-- 选项卡内容 -->
        <var-tabs-items v-model:active="active">
            <!-- 点菜 -->
            <var-tab-item > 
                <div class="neirong-dc">
                    <div class="dc-left">
                        <div v-for="(item,index) in Object.keys(dc)" :key="index" class="dc-leftA" :v-model="dcaaa">{{item}}</div>
                    </div>
                    <div class="dc-right">
                        <!-- 多次循环 -->
                         <var-list
                        :finished="finished"
                        v-model:loading="loading"
                        @load="load"
                    >
                        <!-- <var-cell :key="item" v-for="(item,index) in Object.keys(dc)"> -->
                        <!-- <var-cell :key="item" v-for="(item,index) in Object.values(dc)"> -->
                        <var-cell :key="item" v-for="(item,index) in Object.values(dc)">
                            <div>{{index}}</div>
                            <var-cell :key="item2" v-for="(item2,index2) in item">
                            <div class="dc-rightA">
                                <img src="./imgs/1.png" alt="">
                                <div class="dc-jiesao">
                                    <span class="dc-jiesaoS1"><b>{{item2}}</b></span>
                                    <button class="dc-jiesaoS2">门点销量第一名</button>
                                    <span class="dc-jiesaoS3">月销量1671  好评度93%</span>
                                    <div class="dc-jiesaoS4">
                                        <span>￥</span>
                                        <span style="color:red">11</span>
                                        <span style="">起</span>
                                        <button>选规格</button>
                                    </div>
                                </div>
                            </div>
                            </var-cell>
                        </var-cell>
                    </var-list>
                        <!-- <div class="dc-rightA" v-for="item in b" :key="item">
                            <img src="./imgs/1.png" alt="">
                            <div class="dc-jiesao">
                                <span class="dc-jiesaoS1"><b>{{item}}</b></span>
                                <button class="dc-jiesaoS2">门点销量第一名</button>
                                <span class="dc-jiesaoS3">月销量1671  好评度93%</span>
                                <div class="dc-jiesaoS4">
                                    <span>￥</span>
                                    <span style="color:red">11</span>
                                    <span style="">起</span>
                                    <button>选规格</button>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </var-tab-item>
            <!-- 套餐 -->
            <var-tab-item>
                <div class="neirong-tc">
                    <div class="tc-top">
                        <button v-for="item in d" class="dc-leftA">{{item}}</button>
                    </div>   
                    <!-- 全部套餐推荐 -->
                    <div class="tc-bottom">
                        <div class="tc-bottom-gm1" v-for="item in d" :key="item">
                            <div class="tc-bottom-gm1A">近期热销组合{{item}}</div>
                            <div class="tc-bottom-gm1B">
                                <div class="tc-bottom-gm1B-img">
                                    <img src="./imgs/1.png" alt="">
                                    <div class="tc-bottom-gm1B-imgA">
                                        <span>￥18.9</span>
                                        <span>500毫克...</span>
                                    </div>
                                    <span class="tc-bottom-gm1B-imgB">青芒果口味</span>
                                </div>
                            </div>
                            <div class="tc-bottom-gm1C">
                                <div class="tc-bottom-gm1C-gm">
                                    <button>立即购买</button>
                                    <span>￥35.9</span>
                                    <span>31.9</span>
                                    <span>￥</span>
                                    <span>满减价</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </var-tab-item>
            <!-- 评价 -->
            <var-tab-item>
                <div class="neirong-pj">
                    <!-- 评分 -->
                    <div class="neirong-pjA">
                        <div class="pjA-fen">
                            <div class="pjA-fenA" style="background-color: red;">
                                <span>4.7</span>
                                <span>商家评分</span>
                            </div>
                            <div class="pjA-fenB" style="position: relative;">
                                <div>口味<var-rate v-model="scoreA" :ripple="false" style="transform: scale(0.5);position: absolute;top: -10px;left: 0px;"/></div>
                                <div>包装<var-rate v-model="scoreB" :ripple="false" style="transform: scale(0.5);position: absolute;top: 10px;left: 0px;"/></div>
                            </div>
                            <div class="pjA-fenC">
                                <span>5</span>
                                <span>配送评分</span>
                            </div>
                        </div>
                    </div>
                    <!-- 全部 -->
                    <div class="neirong-pjB">
                        <button v-for="item in b">{{item}}</button>
                    </div>
                    <!-- 评论 -->
                    <div class="neirong-pjC"  v-for="item in e">
                        <div class="pjC-L">
                            <img src="./imgs/1.png" alt="">
                        </div>
                        <div class="pjC-R">
                            <!-- 用户 时间 -->
                            <div class="pjC-R-A">
                                <div class="pjC-R-A-L">
                                    <div class="pjC-R-A-name">落叶飞翔</div>
                                    <div class="pjC-R-A-xing">37分钟送达</div>
                                </div>
                                <div class="pjC-R-A-R">2022.06.06</div>
                            </div>
                            <!-- 客户评论内容 -->
                            <div class="pjC-R-B">{{item}}真的非常好吃常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃真的非常好吃</div>
                            <!-- 图片 -->
                            <div class="pjC-R-C">
                                <img src="./imgs/1.png" alt="">
                                <img src="./imgs/1.png" alt="">
                                <img src="./imgs/1.png" alt="">
                                <img src="./imgs/1.png" alt="">
                            </div>
                            <!-- 回复 -->
                            <div class="pjC-R-D">
                                <div class="pjC-R-D-huifu">商家回复:谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢</div>
                            </div>
                        </div>
                    </div>
                </div>
            </var-tab-item>
        </var-tabs-items>
    </div>
</template>
<script setup lang="ts">

    

    import {ref, onMounted} from 'vue'
    import { Snackbar } from '@varlet/ui'
    // 无限滚动
    const loading = ref(false)
    const finished = ref(false)
    const list = ref([])

    let b = ['推荐','大萨达','大萨达2','大萨达3','大萨达4','大萨达5','大萨达6','大萨达7','大萨达8','大萨达9']
    let d = ['推荐','大2大','大2大2','大2大3','大2大4','大2大5','大2大6','大2大7','大2大8','大2大9']
    // 点菜数据
    let dcaaa = ref(0)
    let dc = {
        aa:['aa1','aa2','aa3','aa4','aa5','aa6'],
        bb:['bb1','bb2','bb3','bb4','bb5','bb6','bb7','bb8','bb9'],
        cc:['cc1','cc2'],
        dd:['dd1','dd2','dd3','dd4','dd5','dd6'],
        ee:['ee1','ee2','ee3','ee4'],
    }
    let e =[1,2,3]
    // 优惠卷 
    let show = ref(false)
    let actions = ref([
        {name:123}
    ])
    let handleSelect = (action:any) => {
         Snackbar(`${action.name}`)
    }
    // c的下标
    // 无限滚动(没有更多数据了)
    const load = () => { 
    setTimeout(() => {
        finished.value = true
        loading.value = false
    }, 1000)
    }
 
    // 选项卡
    const active = ref(0)
    let a = ['点菜','套餐','买过','评价']
    // 评分
    const scoreA = ref(3)
    const scoreB = ref(3)
</script>
<style scoped lang="scss">
    .top{width: 100%;height: 125px;background-color: white;padding-top: 60px;position: fixed;top: 0px;left: 0px;background: url(./imgs/1.png) no-repeat;background-size: 100% 80px;}
    // 店铺
    .dianpu{width: 90%;margin: auto;border-radius: 10px;box-shadow: 0px 0px 10px 1px rgb(202, 202, 202);
        .dianpu-top{padding: 10px;border-radius: 10px 10px 0px 0px;background-color: white;
            img{width: 40px;height: 40px;float: left;margin: 0px 5px 5px 0px;}
            .dianpu-top-right{height: 40px;float: left;width: 82%;
                .dianpu-name{height: 28px;font-size:18px;
                    span{display: block;float: left;}
                    button{float: right;}
                }
                .dianpu-jiesao{height: 10px;width: 100%;
                    .dianpu-paihang{float: left;font-size: 8px;}
                    .dianpu-a{float: left;border-left: 1px solid #dcdcdc;height: 8px;margin: 2px 10px 0px 10px;}
                    .dianpu-shijian{float: left;font-size: 8px;}
                }
            }
            .dianpu-gg{width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #9c9c9c;}
        }
        .dianpu-bottom{padding: 10px;background-color: #f9f9f9;border-radius: 0 0 10px  10px;}
    }
    // 中间推荐评价搜索
    .center{width: 100%;background-color: white;height: 45px;position: fixed;top: 185px;left: 0px; 
        .center-top{
            margin: auto;height: 45px;padding:0px 20px 0px 0px;
            .center-top-A{float: left;
            }
            .center-top-B{float: right;margin-top: 12px;
                .center-top-Btn1{color: #ef9233;border: 1px solid #ef9233;background-color: white;border-radius: 5px;margin-right: 5px;}
                .center-top-Btn2{border: 0px;border-radius: 10px;}
            }
        }
    }
    // 内容
    .neirong{width: 100%;margin-top: 225px;height: 440px;background-color: white;z-index: -1;
        // 点菜
        .neirong-dc{width: 100%;height: 650px;display:flex;
            .dc-left{width: 20%;height: 100%;background-color: #fafafa;line-height: 40px;overflow-y: scroll;}
                .dc-leftA{text-align: center;}
            .dc-left::-webkit-scrollbar{
                display: none;//隐藏滚动条
            }
            .dc-right{width: 80%;height: 100%;overflow-y: scroll;
                .dc-rightA{height: 100px;
                    img{width: 38%;height: 100px;}
                    .dc-jiesao{width: 60%;height: 100%;float: right;
                        span{display: block;}
                        .dc-jiesaoS1{}
                        .dc-jiesaoS2{font-size: 10px;background-color: #fcf8df;border: 0px;color: #fbbd73;}
                        .dc-jiesaoS3{font-size: 6px;color: #adafaf;}
                        .dc-jiesaoS4{height: 20px;padding-top: 20px;
                            span{float: left;}
                            span:nth-child(1){color:red;font-size: 8px;line-height: 24px;}
                            span:nth-child(2){color:red}
                            span:nth-child(3){font-size: 8px;color: #c1c1c1;line-height: 24px;}
                            button{float: right;background-color: #ffd161;border: 0px;border-radius: 5px;font-size: 12px;margin-top: 3px;}
                        }
                    }
                }
            }
            .dc-right::-webkit-scrollbar{
                display: none;//隐藏滚动条
            }
        }
        // 套餐
        .neirong-tc{width: 100%;overflow: hidden;height: 650px;
            .tc-top{height: 45px;white-space: nowrap;overflow-x: auto;
                button{width: 80px;padding: 3px 0px;margin: 10px 3px 0px 3px;}
            }
            .tc-bottom{height: 100%;background-color: #fafafa;line-height: 40px;overflow-y: scroll;
                .tc-bottom-gm1{background-color: white;margin: 10px;padding:10px;border-radius: 10px;
                    .tc-bottom-gm1A{font-size: 12px;line-height: 20px;padding: 5px 10px;}
                    .tc-bottom-gm1B{padding: 5px 10px;
                        .tc-bottom-gm1B-img{width: 105px;position: relative;padding:0px 0px 12px 0px;
                            img{width: 105px;height: 100px;}
                            .tc-bottom-gm1B-imgA{font-size: 12px;display: block;height: 16px;line-height: 12px;position: absolute;left: 0px;top: 85px;width: 100%;white-space:nowrap;
                                span{background-color: #333;color: #d8d8d8;opacity: 0.7;}
                                span:nth-child(1){margin: 0px 3px;}
                                span:nth-child(2){width: 30px;overflow: hidden;}
                            }
                            .tc-bottom-gm1B-imgB{font-size: 12px;display: block;height: 12px;line-height: 12px;position: absolute;left: 0px;top: 110px;}
                        }
                    }
                    .tc-bottom-gm1C{padding: 5px 10px;
                        .tc-bottom-gm1C-gm{height: 40px;
                            button{float: right;height: 40px;border: 0px;background-color: #ffd255;}
                            span{font-size: 12px;display: block;float: right;}
                            span:nth-child(2){text-decoration: line-through;color: #b0b0b0;}
                            span:nth-child(3){font-size: 20px;color: red;line-height: 38px;}
                            span:nth-child(4){color: red;}
                        }
                    }
                }
            }
            .tc-bottom::-webkit-scrollbar {
                display: none;//隐藏滚动条
            }
            .tc-top::-webkit-scrollbar{
                display: none;//隐藏滚动条
            }
        }   
        // 评价
        .neirong-pj{background-color: #f4f4f4;padding-top:15px;overflow-y: auto;height: 650px;
                // 评分
                .neirong-pjA{background-color: white;padding: 13px 25px;
                    .pjA-fen{display:flex;height: 50px;
                        .pjA-fenA{width: 20%;text-align:center;position: relative;
                            span:nth-child(1){font-size: 32px;color: #ffb000;line-height: 32px;}
                            span:nth-child(2){font-size:12px;position: absolute;left: 0px;width: 100%;bottom: 0px;}
                        }
                        .pjA-fenB{width: 50%;font-size: 8px;padding: 0px 20px;border-right: 1px solid #e7e7e7;}
                        .pjA-fenC{width: 30%;float: right;text-align: center;
                            span{display: block;color: #aaaaaa;}
                            span:nth-child(1){font-size: 24px;}
                            span:nth-child(2){font-size: 8px;}
                        }
                    }
                }
                // 全部
                .neirong-pjB{background-color: white;margin-bottom:10px;padding: 10px;margin-top:10px;
                    button{margin: 5px;padding: 5px 10px;background-color: white;border: 1px solid #cccccc;}
                }
                // 评论
                .neirong-pjC{background-color: white;padding: 10px;display: flex;border-bottom:1px solid #e4e4e4;
                    .pjC-L{width: 50px;
                        img{width: 40px;height: 40px;border-radius: 50%;margin-left: 5px;}
                    }
                    .pjC-R{width: 86%;padding-left: 5px;
                        // 用户 时间
                        .pjC-R-A{width: 100%;height: 40px;font-size:8px;color:#c7c5c1;
                            .pjC-R-A-L{width: 70%;float: left;
                                .pjC-R-A-name{font-size: 16px;color: black;}
                            }
                            .pjC-R-A-R{float: right;}
                        }
                        // 客户评论内容
                        .pjC-R-B{width: 100%;margin-top: 10px;}
                        // 图片
                        .pjC-R-C{width: 80%;
                            img{margin: 0px 8px 10px 0px;width: 80px;}
                        }
                        // 回复
                        .pjC-R-D{width: 100%;
                            .pjC-R-D-huifu{background-color: #f4f4f4;padding: 10px;color: #a1a1a1;font-size: 8px;margin: 10px 0px;}
                        }
                    }
                }

        }
    }
    
</style>